<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form @submit.native.prevent>
        <el-button
          v-waves
          class="filter-item"
          type="success"
          icon="el-icon-plus"
          native-type="submit"
          @click="$router.push('/meal/packageCreate')"
          >添加加油包</el-button
        >
      </el-form>
    </div>
    <!-- 表格内容 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="加载中..."
      border
      fit
      @sort-change="sortChange"
      highlight-current-row
    >
      <el-table-column align="center" label="运营商">
        <template slot-scope="scope">{{
          $store.getters.config.enum.operator.find((e) => e.id === scope.row.operator).value
        }}</template>
      </el-table-column>
      <el-table-column align="center" label="套餐名字">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column align="center" label="套餐编码">
        <template slot-scope="scope">{{ scope.row.operator_package_id }}</template>
      </el-table-column>
      <el-table-column align="center" label="套餐价格(元)">
        <template slot-scope="scope">{{ scope.row.price }}</template>
      </el-table-column>
      <el-table-column align="center" label="语音(分)">
        <template slot-scope="scope">{{ scope.row.voice }}</template>
      </el-table-column>
      <el-table-column align="center" label="流量(MB)">
        <template slot-scope="scope">{{ scope.row.flow }}</template>
      </el-table-column>
      <el-table-column align="center" label="已售" sortable="custom" prop="total_sales">
        <template slot-scope="scope">{{ scope.row.total_sales || 0 }}</template>
      </el-table-column>
      <el-table-column align="center" label="是否上架">
        <template slot-scope="scope">
          <el-tag :type="scope.row.is_sale === 1 ? 'success' : 'danger'">{{
            scope.row.is_sale === 1 ? '上架中' : '已下架'
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="danger" size="small" @click="handle(scope.row, 0)" v-if="scope.row.is_sale == 1"
            >下架</el-button
          >
          <el-button type="success" size="small" @click="handle(scope.row, 1)" v-if="scope.row.is_sale == 0"
            >上架</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.size"
      @pagination="fetchData"
    />
  </div>
</template>

<script>
import waves from '@/directive/waves'; // waves directive
import Pagination from '@/components/Pagination'; // secondary package based on el-pagination
import { getList, sale } from '@/api/package';

export default {
  directives: {
    waves,
  },
  components: {
    Pagination,
  },
  data() {
    return {
      list: null,
      listLoading: true,
      total: 0,
      listQuery: {
        page: 1, // 当前页码
        size: 20, // 每页大小
      },
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    sortChange(e) {
      this.listQuery.sortProp = e.prop;
      if (e.order === 'ascending') {
        this.listQuery.sortOrder = 'asc';
      } else if (e.order === 'descending') {
        this.listQuery.sortOrder = 'desc';
      } else {
        this.listQuery.sortOrder = null;
      }
      this.fetchData();
    },
    async handle(row, type) {
      await sale({ id: row.id, type });
      this.$message({
        type: 'success',
        message: '操作成功!',
      });
      this.fetchData();
    },

    async fetchData() {
      this.listLoading = true;
      const res = await getList(this.listQuery);
      this.total = res.data.total;
      this.list = res.data.list;
      setTimeout(() => {
        this.listLoading = false;
      }, 500);
    },
  },
};
</script>
<style scoped lang="scss">
.btn {
  // margin: 5px;
}

.filter-container {
  .filter-item {
    margin-bottom: 10px;
  }
}
</style>
